<template>
  <div class="shop-head" ref="box">
    <div class="view-text">{{ headContent.myTitle }}</div>
    <div class="view-img" v-if="headContent.haveIcon" @click="toShoppingCart">
      <div class="shop-union">
        <img src="../../assets/img/Union.png">
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'ShopHead',
  data() {
    return {
      myTitle: '',
      haveIcon: false
    }
  },
  methods: {
    toShoppingCart() {
      this.$router.push('/cart')
    },

  },
  mounted() {
    // this.toShoppingCart()
  },
  computed: {
    ...mapState({
      headContent: state => state.shopMuneOption.headContent
    })
  }
}
</script>

<style>
.shop-head {
  position: fixed;
  display: flex;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 46px;
  justify-content: center;
  background-color: rgb(12, 13, 13);

}

.view-text {
  /* position: inherit; */
  box-sizing: border-box;
  padding-top: 16px;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0;
  color: white;
  /* font-family: Inter; */
}

.view-img {
  position: absolute;
  width: 44px;
  height: 44px;
  top: 5px;
  right: 12px;
  bottom: -3px;
  left: 319px;
  /* background-size: cover; */
}

.shop-union {
  position: absolute;
  width: 17.97px;
  height: 18.25px;
  left: 12.58%;
  right: 12.58%;
  top: 12px;
  bottom: 12%;
}
</style>